import React, {Component, Fragment} from 'react';
import { CSSTransition,TransitionGroup } from 'react-transition-group';
import './style.css'
class Animate extends Component {

    constructor (props) {
        super(props);
        this.state = {
            list: []
        }
        this.handleToggle = this.handleToggle.bind(this)
    }

    render() {
        return (
            <Fragment>
                {/* <CSSTransition 
                    in={this.state.show}
                    timeout={1000}
                    classNames='fade'
                    unmountOnExit
                    onEntered={(el) => {
                        el.style.color = 'blue'
                    }}
                    appear={true}>
                    <div>hello</div>
                </CSSTransition> */}
                <h1>hello</h1>
                <TransitionGroup>
                {
                    this.state.list.map((item, index) => {
                        return (
                            <CSSTransition 
                                timeout={1000}
                                classNames='fade'
                                unmountOnExit
                                onEntered={(el) => {
                                    el.style.color = 'blue'
                                }}
                                appear={true}>
                            <div key={index}>{item}</div>
                            </CSSTransition> 
                        )
                    })
                }
                </TransitionGroup>
                <button onClick={this.handleToggle}>toggle</button>
            </Fragment>
        )
    }

    handleToggle () {
        // this.setState({
        //     show: !this.state.show
        // })
        this.setState((prevState) => {
            return {
                list: [...prevState.list, 'item']
            }
        })
    }
}

export default Animate;